import React from 'react';

class App extends React.Component {
  state = {
    inputValue: '菠萝',
    list: ['新闻1', '新闻2']
  };
  // 获取表单值
  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  // 点击发布按钮
  handleClick = () => {
    // 利用解构赋值获取数据
    const { inputValue, list } = this.state;
    if (inputValue.trim() === '') {
      window.alert('请输入内容');
      return;
    }
    list.push(inputValue);
    // 更新视图
    this.setState({ list, inputValue: '' });
  };

  render() {
    // 利用解构赋值获取数据
    const { list, inputValue } = this.state;
    return (
      <div className="App">
        <input type="text" value={inputValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>发布</button>
        <ol>
          {
            list.map((item, index) => <li key={index}>{item}</li>)
          }
        </ol>
      </div>
    );
  }
}


export default App;
